<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>购买</title>
<%@include file="../include/include.jsp"%>
<link rel="stylesheet" type="text/css" href="${csspath }/public.css"/>
<link rel="stylesheet" type="text/css" href="${csspath }/datepicker.css"/>
<link rel="stylesheet" type="text/css" href="${csspath }/style_l.css"/>
<script type="text/javascript" src="${jspath }/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${layerPath}/layer.js"></script>
<script type="text/javascript" src="${jspath }/jquery.ui.min.js"></script>
<script type="text/javascript" src="${jspath }/ui.datepicker_zh-CN.js"></script>
<script type="text/javascript" src="${jspath }/jquery.blockUI.js"></script>
<script type="text/javascript" src="${jspath }/public.js"></script>
<script type="text/javascript" src="${jspath }/jquery.selectAll.js"></script>
<script type="text/javascript" src="${jspath}/jquery/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="${jspath}/jquery/jquery.alerts.js"></script>
<link rel="stylesheet" type="text/css" href="${csspath}/jquery.alerts.css" />
<script type="text/javascript" src="${jspath}/load_layer.js"></script>
<link rel="stylesheet" type="text/css"
	href="${webcontext}/css/validationEngine.jquery.css" />
<script src="${jspath}/jquery/validate/jquery.validationEngine.js"
	type="text/javascript"></script>
<script src="${jspath}/jquery/validate/jquery.validationEngine-zh.js"
	type="text/javascript"></script>
	<script type="text/javascript"
	src="${webcontext}/javascript/jquery/jquery.ui.draggable.js"></script>
<link rel="stylesheet" type="text/css"
	href="${bootstrapPath}/css/bootstrap.css" />
<script type="text/javascript" src="${bootstrapPath}/js/bootstrap.js"></script>
<style type="text/css">
.formError .formErrorContent {
    -moz-border-radius: 6px 6px 6px 6px;
    -moz-box-shadow: 0 0 6px #000000;
    background: none repeat scroll 0 0 #EE0101;
    border: 2px solid #DDDDDD;
    color: #FFFFFF;
    font-family: tahoma;
    font-size: 11px;
    padding: 4px 10px;
    width: 100px;
}

#edit_purchase{
	border: 1px solid #ebebeb;
}

.input_tab { table-layout:fixed; }

.data_tab{
	border: 0 solid #fff;
}
.data_tab th{
	background: #fff url("");
	color: #000;
}

.data_tab tr.over td, .data_tab tr.over td a{
	background-color: #fff;
	color: #000;
	font-weight: normal;
}
</style>
<script type="text/javascript">
$(function(){
	
	if('${memberResultsDto.packageDefId}'!=''){	
		$('#packageNameSel').val('${memberResultsDto.packageDefId}');
		//按选择套餐设置隐藏域
		$("#price").html(Math.round($("#price"+$("#packageNameSel").val()+"Htxt").val())+"元");
		$("#priceHtxt").val(Math.round($("#price"+$("#packageNameSel").val()+"Htxt").val()));
		$("#isPhysicalCardHtxt").val($("#isPhysicalCard"+$("#packageNameSel").val()+"Htxt").val());
		$("#isPrepaymentCardHtxt").val($("#isPrepaymentCard"+$("#packageNameSel").val()+"Htxt").val());
		$("#unitOfPeriodHtxt").val($("#unitOfPeriod"+$("#packageNameSel").val()+"Htxt").val());
		$("#validPeriodHtxt").val($("#validPeriod"+$("#packageNameSel").val()+"Htxt").val());
		$("#packageNameHtxt").val($("select option:checked").text());
		
		//设置卡片名称
		$("#cardName").html($("#cardDefinitionName"+$("#packageNameSel").val()+"Htxt").val());
		$("#cardDefinitionIdHtxt").val($("#cardDefinitionId"+$("#packageNameSel").val()+"Htxt").val());
		
		//按实物卡非实物卡设置卡号和仅购买按钮
		if($("#isPhysicalCard"+$("#packageNameSel").val()+"Htxt").val()==0){
			$("#packageNumber1Div").css('display',''); 
			$("#packageNumber2Div").css('display','none');
			$("#cativeAfter").attr('disabled','disabled');
			$("#cativeAfter").css('color','#ebebeb');
			$("#cativeAfter").css('border-color','#ebebeb');
		}else if($("#isPhysicalCard"+$("#packageNameSel").val()+"Htxt").val()==1){
			$("#packageNumber1Div").css('display','none'); 
			$("#packageNumber2Div").css('display','');
			$("#cativeAfter").attr('disabled',false);
			$("#cativeAfter").css('color','#FFF');
			$("#cativeAfter").css('border-color','#ADA9A4');
		}
		
		//获取库存
		$.ajax({
			type:'POST',
			url: '${webcontext}/crmdp/dealer/purchase/getPackageInfo',
			async: true,
			data : "cardDefId="+$("#cardDefinitionId"+$("#packageNameSel").val()+"Htxt").val()+"",
			dataType : 'json',
			beforeSend: function(){ 
					layer.load(1);
				},
	  				success : function(data) {
	  				layer.closeAll('loading');
				$("#quantity").html(data);
				$("#onhandQuantityHtxt").val(data);
		    }
		}); 
	}
	
	$('#packageNameSel').change(function(){
		//选择是请选择时候直接返回
		if($("#packageNameSel").val()==-1){
			$("#packageNumberTxt").val("");
			$("#price").html("");
			$("#cardName").hide()
			$("#packageNumber1Div").hide();
			$("#packageNumber2Div").hide();
			$("#quantity").html("");
			return;
		}else{
			$("#cardName").show()
			$("#packageNumber1Div").show();
		}
		
		$("#packageNameHtxt").val(($("select option:checked").text()));
		
	    //按选择套餐设置隐藏域
		$("#price").html(Math.round($("#price"+$("#packageNameSel").val()+"Htxt").val())+"元");
		$("#priceHtxt").val(Math.round($("#price"+$("#packageNameSel").val()+"Htxt").val()));
		$("#isPhysicalCardHtxt").val($("#isPhysicalCard"+$("#packageNameSel").val()+"Htxt").val());
		$("#isPrepaymentCardHtxt").val($("#isPrepaymentCard"+$("#packageNameSel").val()+"Htxt").val());
		$("#unitOfPeriodHtxt").val($("#unitOfPeriod"+$("#packageNameSel").val()+"Htxt").val());
		$("#validPeriodHtxt").val($("#validPeriod"+$("#packageNameSel").val()+"Htxt").val());
		
		//设置卡片名称
		$("#cardName").html($("#cardDefinitionName"+$("#packageNameSel").val()+"Htxt").val());
		$("#cardDefinitionIdHtxt").val($("#cardDefinitionId"+$("#packageNameSel").val()+"Htxt").val());
		
		//按实物卡非实物卡设置卡号和仅购买按钮
		if($("#isPhysicalCard"+$("#packageNameSel").val()+"Htxt").val()==0){
			$("#packageNumber1Div").show(); 
			$("#packageNumber2Div").hide();
			$("#cativeAfter").attr('disabled','disabled');
			$("#cativeAfter").css('color','#ebebeb');
			$("#cativeAfter").css('border-color','#ebebeb');
		}else if($("#isPhysicalCard"+$("#packageNameSel").val()+"Htxt").val()==1){
			$("#packageNumber1Div").hide(); 
			$("#packageNumber2Div").show();
			$("#cativeAfter").attr('disabled',false);
			$("#cativeAfter").css('color','#FFF');
			$("#cativeAfter").css('border-color','#ebebeb');
		}
		
		//获取库存
		$.ajax({
			type:'POST',
			url: '${webcontext}/crmdp/dealer/purchase/getPackageInfo',
			async: false,
			data : "cardDefId="+$("#cardDefinitionId"+$("#packageNameSel").val()+"Htxt").val()+"",
			dataType : 'json',
			beforeSend: function(){ 
					layer.load(1);
				},
	  				success : function(data) {
	  				layer.closeAll('loading');
				$("#quantity").html(data);
				$("#onhandQuantityHtxt").val(data);
		    }
		}); 
	}); 

	//取消
	$("#cancel").click(function(){
		jConfirm("取消购买操作？","确认提示",function(result){
    		if(result == true)
    		{	
            	window.location.href="${webcontext}/crmdp/dealer/member/redirectMaintainMemberPage";
    		}
    	});
	});
	
	$("#edit_purchase").validationEngine(
			{
             promptPosition:"topRight",
             success:false,
             validationEventTriggers : "change blur",
			 failure:function(){} 
	});
	
	//购买并激活
	$("#activeNow").click(function(){
		//套餐选择为空时
		if($('#packageNameSel').val()=='-1'){
			jAlert("请选择套餐类型！","提示信息");
			return;
		}
		
		if($("#onhandQuantityHtxt").val()=='0'){
			jAlert("库存不足","提示信息");
			return;
		}
		
		if(!$("#edit_purchase").validationEngine(
				{
	             promptPosition:"topRight",
	             validationEventTriggers : "change blur",
	           	 returnIsValid:true
				 })){
			return;
		}
		jConfirm("确认购买并进行激活？","确认提示",function(result){
    		if(result == true)
    		{	
    			//判断是否存在该未销售实物卡
    			if($("#isPhysicalCard"+$("#packageNameSel").val()+"Htxt").val()==1){
	    			$.ajax({
	    				type:'POST',
	    				url: '${webcontext}/crmdp/dealer/purchase/checkMemberPackageInfoExsit',
	    				async: false,
	    				data : "packageDefId="+$("#packageNameSel").val()+"&packageNumber="+$("#packageNumberTxt").val(),
	    				dataType : 'json',
	    				beforeSend: function(){ 
  		  					layer.load(1);
  		  				},
  			  				success : function(data) {
  			  				layer.closeAll('loading');
	    					if(data!=true){
	    						jAlert("输入卡号不存在或已经出售，请检查后重新输入！","提示信息");
	    						return;
	    					}else{
	    						$('#edit_purchase').attr('action', '${webcontext}/crmdp/dealer/purchase/activeNowPhysical?fromPurchasePage=true');
	    		            	$("#edit_purchase").submit();
	    					}
	    			    }
    				}); 
    			}else{
    				$.ajax({
	    				type:'POST',
	    				url: '${webcontext}/crmdp/dealer/purchase/activeNow',
	    				async: false,
	    				data : $("form").serialize(),
	    				dataType : 'json',
	    				beforeSend: function(){ 
  		  					layer.load(1);
  		  				},
  			  				success : function(data) {
  			  				layer.closeAll('loading');
	    					if(data.result==true){
	    						jAlert("购买成功！","提示信息",function(){
	    							window.location.href="${webcontext}/crmdp/dealer/member/redirectMaintainMemberPage";
	    						});
	    					}else{
	    						jAlert(data.errorMsg,"提示信息");
	    					}
	    			    }
    				});
    			}
    		}
    	});
		
		
	});
	
	//仅购买
	$("#cativeAfter").click(function(){
		//套餐选择为空时
		if($('#packageNameSel').val()=='-1'){
			jAlert("请选择套餐类型！","提示信息");
			return;
		}
		
		if($("#isPhysicalCard"+$("#packageNameSel").val()+"Htxt").val()==0){
			jAlert("非实物卡购买后必须立刻激活，请按购买激活按钮操作！","提示信息");
			return;
		}
		
		if($("#onhandQuantityHtxt").val()=='0'){
			jAlert("库存不足！","提示信息");
			return;
		}
		
		if(!$("#edit_purchase").validationEngine(
				{
	             promptPosition:"topRight",
	             validationEventTriggers : "change blur",
	           	 returnIsValid:true
				 })){
			return;
		}
		
		jConfirm("确认购买,以后再进行激活？","确认提示",function(result){
    		if(result == true){	
    			if($("#isPhysicalCard"+$("#packageNameSel").val()+"Htxt").val()==1){
	    			//判断是否存在该未销售实物卡
	    			layer.load(1);
	    			$.ajax({
	    				type:'POST',
	    				url: '${webcontext}/crmdp/dealer/purchase/checkMemberPackageInfoExsit',
	    				async: false,
	    				data : "packageDefId="+$("#packageNameSel").val()+"&packageNumber="+$("#packageNumberTxt").val(),
	    				dataType : 'json',
  			  			success : function(data) {
	    					if(data!=true){
	    						jAlert("输入卡号不存在或已经出售，请检查后重新输入！","提示信息");
	    						layer.closeAll('loading');
	    					}else{
	    						$.ajax({
	    		    				type:'POST',
	    		    				url: '${webcontext}/crmdp/dealer/purchase/activeAfter',
	    		    				async: false,
	    		    				data : $("form").serialize(),
	    		    				dataType : 'json',
	    	  			  			success : function(data) {
	    	  			  				layer.closeAll('loading');
	    	  			  				if(data.result){
	    	  			  					jAlert("购买成功！","提示信息",function(){
	    	  			  						window.location.href="${webcontext}/crmdp/dealer/member/redirectMaintainMemberPage";
	    	  			  					});
	    	  			  				}else{
	    	  			  					jAlert(data.errorMsg,"提示信息");
	    	  			  				}
	    	  			  			}
	    						}); 
	    					}
	    			    }
	    			}); 
    			}
    		}
    	});
	});
});
</script>

</head>
<body>
	<div id="content">
		<div id="wrap">
			<!-- <div id="breadcrumba" style="color: #025D7B; height: 26px; line-height: 26px;">
				<span>驰加有道管理</span>
				<span>&gt;</span>
				<span>购买</span>
			</div> -->
 			<form:form id="edit_purchase" action="#" method="post" modelAttribute="submitDto" enctype="multipart/form-data">
					  <div class="input_div">
							<div class="title">
								<p>购卡</p>
							</div>
					  </div>
			          <div class="spliter h_10"></div>           
			          <div class="spliter h_5"></div>
					  <div class="data_div">
						<table class="data_tab">
							<tr>
								<th width="30%" style="text-align: right;padding-right: 30px;">手机</th>
								<td>
								<input type="hidden" id="memberIdHtxt" name="memberId" value="${memberResultsDto.id}" >
								<input type="hidden" id="memberNameHtxt" name="memberName" value="${memberResultsDto.memberName}" >
								<input type="hidden" id="mobilePhoneHtxt" name="mobilePhone" value="${memberResultsDto.mobilePhone}" >
								<input type="hidden" id="carPlateTHtxt" name="carPlate" value="${memberResultsDto.carPlate}" >
								<input type="hidden" id="priceHtxt" name="price" >
								<input type="hidden" id="isPhysicalCardHtxt" name="isPhysicalCard"/>
                     			<input type="hidden" id="isPrepaymentCardHtxt" name="isPrepaymentCard" >
                     			<input type="hidden" id="unitOfPeriodHtxt" name="unitOfPeriod" >
                     			<input type="hidden" id="validPeriodHtxt" name="validPeriod" >
                     			<input type="hidden" id="onhandQuantityHtxt" name="onhandQuantity" >
                     			<input type="hidden" id="cardDefinitionIdHtxt" name="cardDefinition.id" >
                     			<input type="hidden" id="packageNameHtxt" name="packageName" >
								${memberResultsDto.mobilePhone}</td>
		                    </tr>
		                    <tr>
			                     <th width="30%" style="text-align: right;padding-right: 30px;">姓名</th>
			                     <td>${memberResultsDto.memberName}</td>
		                    </tr> 
		                    <tr>
			                     <th width="30%" style="text-align: right;padding-right: 30px;">车牌</th>
			                     <td>${memberResultsDto.carPlate}</td>
		                    </tr>
		                     <tr>
			                     <th width="30%" style="text-align: right;padding-right: 30px;">套餐类型</th>
			                     <td>
			                      <core:forEach items="${packageDefinitionListDto}" var="listH">
			                      	<input type="hidden" id="price${listH.id}Htxt" value="${listH.price}"/>
			                      	<input type="hidden" id="isPhysicalCard${listH.id}Htxt" value="${listH.isPhysicalCard}"/>
			                      	<input type="hidden" id="isPrepaymentCard${listH.id}Htxt" value="${listH.isPrepaymentCard}"/>
			                      	<input type="hidden" id="unitOfPeriod${listH.id}Htxt" value="${listH.unitOfPeriod}"/>
			                      	<input type="hidden" id="validPeriod${listH.id}Htxt" value="${listH.validPeriod}"/>
			                      </core:forEach>
			                      <core:forEach items="${packageDefinitionListDto}" var="listCardH">
			                      	    <input type="hidden" id="cardDefinitionId${listCardH.id}Htxt" value="${listCardH.cardDefinition.id}"/>
								    	<input type="hidden" id="cardDefinitionName${listCardH.id}Htxt" value="${listCardH.cardDefinition.name}"/> 
								   </core:forEach>
			                      <select id="packageNameSel" class="form-control" name="packageDefId" style="width:300px">
								    <core:forEach items="${packageDefinitionListDto}" var="list">
		          						<core:choose>
					                      <core:when test='${list.id=="-1"}'>
					                      	<option value="${list.id}" selected>请选择套餐
					                      	</option>
					                      </core:when>
					                      <core:otherwise>
					                      	<option value="${list.id}">${list.name}
					                      	</option>
					                      </core:otherwise>
						                 </core:choose>
      								</core:forEach>
						    	 </select>
			                     </td>
		                    </tr> 
		                    <tr>
			                     <th width="30%" style="text-align: right;padding-right: 30px;">套餐卡片名称</th>
			                     <td id="cardName">
			                     	
			                     </td>
		                    </tr>
		                    <tr>
			                     <th width="30%" style="text-align: right;padding-right: 30px;">套餐卡片剩余库存</th>
			                     <td id="quantity">
			                     	
			                     </td>
		                    </tr>
		                   
		                    <tr>
			                     <th width="30%" style="text-align: right;padding-right: 30px;">套餐卡号</th>
			                     <td>
			                     	<div id="packageNumber1Div" style="display: none">购买后自动生成</div>
					             	<div id="packageNumber2Div" style="width: 150px"><input id="packageNumberTxt" name="packageNumber" class="form-control input-sm"  value="${memberResultsDto.packageNumber}"></div> 
			                     </td>
		                    </tr>
		                      	<tr>
			                     <th width="30%" style="text-align: right;padding-right: 30px;">实际支付</th>
			                     <td id="price">
			                     </td>
		                    </tr>    
						</table>
					</div>
					
				  <div class="spliter h_10"></div>           
			      <div class="spliter h_5"></div> 
			         
			      <div class="btn_div">
			                <button type="button" class="btn" style="width: 125px;" id="activeNow" value="购买并激活">
			                	<i class="glyphicon glyphicon-check" style="color:#FFFFFF"></i>&nbsp;购买并激活
			                </button>
			                <button type="button" class="btn" style="width: 125px;" id="cativeAfter" value="仅购买">
			                	<i class="glyphicon glyphicon-unchecked" style="color:#FFFFFF"></i>&nbsp;仅购买
			                </button>
			                <button type="button" class="btn" style="width: 125px;" value="取消" id="cancel">
			                	<i class="glyphicon glyphicon-share-alt" style="color:#FFFFFF"></i>&nbsp;取消
			                </button>
			      </div>
			      <div class="spliter h_10"></div>           
			      <div class="spliter h_5"></div> 
      </form:form>  
      </div>
	</div>
</body>

</html>